<template>
    <div>
            <!-- <div class="handle-box">
                <label class="label" >资源名称：</label>
                <el-input class="handle-input" v-model="form.resource_name" >  </el-input>
                    <el-button color="#1c84c6" class="handle-btn"  @click="handleSearch">查询</el-button>
                    <el-row class="top-btn">
                        <el-button color="#e35148" @click="handleAllDelete">删除</el-button>                         
                    </el-row>
                </div> -->
                <el-table ref="multipleTableRef" 
                     :header-cell-style="{color:'#2A62BC'}"
                     :data="tableData"   
                     style="width: 100%;" 
                    border
                    stripe 
                    @selection-change="handleSelectionChange">
                    <!-- <el-table-column   type="selection" width="35" /> -->
                    <el-table-column  prop="serial_number" label="序号"  align="center"></el-table-column>
                    <el-table-column prop="problem" label="问题描述" align="center"></el-table-column>
                    <el-table-column prop="correlated_curriculum" label="相关课程" align="center"></el-table-column>
                    <el-table-column prop="question_time" label="提问时间" align="center"></el-table-column>
                    <el-table-column prop="questioner" label="提问人" align="center"></el-table-column>
                    <el-table-column label="操作" width="260" align="center" >
                        <template #default="scope">
                            <el-row class="right-btn">
                                <el-tooltip content="详情" placement="bottom" effect="light">
                                <el-button  style="color: #676A6C;"  @click="quesDetail(scope.$index,scope.row)">
                                    <i class="iconfont icon-road1 "></i>
                                </el-button>
                            </el-tooltip>
                                <el-tooltip content="删除" placement="bottom" effect="light">
                                <el-button  :icon="Delete" style="color: #ed5565;"  @click="handleDelete(scope.$index)"></el-button>
                            </el-tooltip>
                            </el-row>
                            <!-- </el-button-group> -->
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination
                    :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :page-sizes="[5, 10, 15, 20]"
                        size="small"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageTotal"
                        @size-change="handleSizeChange"
                        @current-change="handlePageChange"/>
                </div>

                <!-- 详情弹出框 -->
            <el-dialog title="解答" v-model="editVisible" width="675" >
                <el-row class="row-1">
                    <el-col :span="3">
                        <el-avatar :size="50" :src="quesAvatar" />
                    </el-col>
                    <el-col :span="12">
                        <h4>{{ form.questioner }}【学生】</h4>
                        <h4>{{ form.problem }}</h4>
                        <h4>{{ form.question_time }}</h4>
                    </el-col>
                </el-row>
                <el-row  class="row-1 row-2" >
                    <el-col :span="110" class="col-1">
                        <h4>{{ form.responder }}【老师】</h4>
                        <h4>{{ form.answer_content }}</h4>
                        <h4>{{ form.answer_time }}</h4>
                    </el-col>
                    <el-col :span="3" class="col-2">
                        <el-avatar :size="50" :src="quesAvatar" />
                    </el-col>  
                </el-row>
                <div class="div-content">
                    <el-text class="text-div">我要回答</el-text>
                </div>
                <w-editor  v-model="value"></w-editor>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button color="#0ab394" @click="editVisible = false">关闭</el-button>
                        <el-button color="#0ab394" @click="saveQues">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </template>
    
    <script setup >
    import { ref, reactive,onMounted, onBeforeUnmount } from 'vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import { Delete, Edit, Search, CaretBottom } from '@element-plus/icons-vue';
    import { getClassQues } from '../../../api/teaching' ;
    import quesAvatar from '@/assets/img/img.jpg' ;
    import WEditor from '../../../components/WEditor.vue';   
    //分页字体
    const small = ref(true)
    // const size = ref<'default' | 'large' | 'small'>('default')
    
    //分页数据
    const query = reactive({
        pageIndex: 1,
        pageSize: 5,
    });
    //表格数据
    const tableData = ref();
    //总页数
    const pageTotal = ref(0);
    const multipleTableRef = ref()
    const state = reactive({
        multipleSelection:[]
    })
    
    // 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
    const getData = () => {
        getClassQues({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
            console.log(res,"---res---")
            // tableData.value = res.data.
            let start  = (query.pageIndex-1)*query.pageSize;//开始位置
            let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
            tableData.value = res.data.slice(start,end);
            // tableData.value = res.data;
            pageTotal.value = res.data.length
        })
       
        
    };
    getData();
    //多选框权限
    const handleSelectionChange = (val) => {
      state.multipleSelection = val
    }
    // 分页导航
    const handleSizeChange = (val) => {
      // console.log(`${val} items per page`)
      query.pageSize = val;
      getData()
    }
    const handlePageChange = (val) => {
        query.pageIndex = val;
        console.log(val,"==")
        console.log(query.pageSize)
        getData()
    };
    
    // 删除单个操作
    const handleDelete = (index) => {
        // 二次确认删除
        ElMessageBox.confirm('确定要删除吗？', '提示', {
            type: 'warning'
        })
        .then(() => {
            ElMessage.success('删除成功');
            //to 传递id 到后台 
            tableData.value.splice(index, 1);
            // 删除成功后
            // getData()
        })
        .catch(() => {});
    };
   
    //------------
    const editVisible = ref(false)
    const form = reactive({
        questioner:'',
        problem:'',
        question_time:'',
        responder:'',
        answer_content:'',
        answer_time:'',
    })
    const  quesDetail =(index,row)=>{
        form.questioner=row.questioner
        form.problem=row.problem
        form.question_time=row.question_time
        form.responder=row.responder
        form.answer_content=row.answer_content
        form.answer_time=row.answer_time
        editVisible.value = true
    }
    //保存问题回答的答案

    const value = ref("<p class='customerName'>叶建雄</p><p> 您好。</p><p> 我司收到您的简历，约您于<span class='interview_Date'>2020-06-11 01:05</span>面试，面试请携带简历。</p><p> 面试地址：苏州工业园区星湖街328号创意产业园1栋B座701室</p><p> ps:收到请回复!</p><p> admin</p><p> Phone:13151746899</p><p> Email:huangfei1230@sina.com</p><p> Adds：江苏苏州工业园区星湖街328号创意产业园1-B-701</p><p> 江苏海鼎信息科技有限公司</p>");
    const  saveQues=()=>{
        
    }

 
    </script >
    <style lang="less" scoped>
    .div-content{
    border-bottom: 1px solid #e7eaec;
    margin-top: 60px;
    margin-bottom: 20px;
    } 
    .text-div{
      font-size: 24px;
      font-weight: 600;
    //   color: #676a6c;;
      color: #676a6c;
    }
    .handle-box {
        margin-bottom: 20px;   
        .handle-btn{
            margin-left: 8px;
        }    
    }
    .handle-input {
        width:200px;
       padding: 6px;
    }
    .label{
       display: inline-block;
       max-width:100%;
       margin: 5px;
       font-weight: 100; 
       color: #676a6c;
       
    }
    .top-btn{
        float: right;
        .el-button{
            margin-left: 5px;
        }
    }
    .right-btn{
         justify-content:center;
        .el-button{
            height: 22px;
            // width: 60px;
            margin-right: 10px;
            padding: 1px 5px;
        }
    }
  .row-1{
    border-bottom: 1px solid #e7eaec;
    height: 80px;
  }
  .row-2{
    text-align:end ;
    padding-top: 10px;
    .col-1{
        margin-left: 65%;
    }
   
  }
    
    </style>